<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>应急指挥部</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <filterTitle @query="query" @reset="Reset" :form="formInline" :formData="formData">
      </filterTitle>
      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef"
        ref="gjxm" :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>

    <emheadquartersadd @getList="getList" ref="emheadquartersadd" :dialogVisible.sync="dialogVisible" :type="type"
      :id="id"></emheadquartersadd>
    <approval @getList="getList" :visible.sync="visible" :id="id"></approval>
  </div>
</template>

<script>
import emheadquartersadd from "./components/Emheadquartersadd.vue";
import approval from "./components/Approval.vue";
import { yjzhblistpage, deletelist, selectResponse } from "@/api/EmergencyDisposal/yjzhb";
import { getDictByGroupEmergency } from "@/api/common.js";
export default {
  name: "Emheadquarterslist",
  components: { emheadquartersadd, approval },
  data() {
    return {
      // 分页信息
      paginationAtrrs: {
        total: 0,
        layout: " prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "应急指挥部列表",
        actions: [
          {
            id: "ListAdd",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "headquartersName",
            label: "应急指挥部",
            align: "left",
            "min-width": "260px"
          },
          {
            prop: "eventName",
            label: "事件类别",
            "min-width": "80px",
            align: "center"
          },
          {
            prop: "responseLvName",
            label: "响应级别",
            "min-width": "80px",
            align: "center"
          },
          {
            prop: "effectRange",
            label: "影响范围",
            "min-width": "90px",
            align: "center"
          },
          {
            prop: "effectTime",
            label: "影响时间",
            align: "center",
            "min-width": "200px"
          },
          {
            prop: "headquartersLvName",
            label: "指挥部级别",
            "min-width": "80px",
            align: "center"
          },
          {
            prop: "establishTime",
            label: "成立时间",
            align: "center",
            "min-width": "130px"
          },
          {
            prop: "responseName",
            label: "响应命令单",
            align: "left",
            "min-width": "220px",
            render: (h, { row }) => {
              return (
                <div>
                  <span
                    class='commonTableStyle'
                    style='width: 100%;'
                    {...{
                      on: {
                        click: () => {
                          this.$router.push({
                            path: "/EmergencyResponseinfo",
                            query: { id: row.responseId }
                          });
                        }
                      }
                    }}
                  >
                    {row.responseName}
                  </span>
                </div>
              );
            }
          },
          {
            prop: "flowStatus",
            label: "状态",
            align: "center",
            "min-width": "80px"
            // formatter: (row, column, cellValue, index) => {
            //   if (cellValue === "0") {
            //     return "编辑中"
            //   } else if (cellValue === "1") {
            //     return "待审批"
            //   } else if (cellValue === "2") {
            //     return "已发布"
            //   }
            // }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "120px",
            render: (h, { row }) => {
              let arr = [];
              const tbPower = this.common.isHasPower("tbr");
              const spPower = this.common.isHasPower("spr");
              if (["1", "4"].includes(row.flowCode) && tbPower && row.operate === true) {
                arr = ["编辑", "删除"];
              } else if (row.flowCode === "2" && spPower) {
                arr = ["审批"];
              } else if (row.flowCode === "3") {
                arr = ["查看"];
              } else {
                arr = [];
              }
              return (
                <div>
                  {arr.map((item) => {
                    return (
                      <span
                        style='color:#3561fd;cursor:pointer;text-decoration: underline;margin:0 10px'
                        {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, row);
                            }
                          }
                        }}
                      >
                        {item}
                      </span>
                    );
                  })}
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          // "max-height": "430px",
          // height: "430px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      formData: [
        {
          elType: "input",
          id: "responseName",
          label: "响应命令单",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "select",
          id: "eventCode",
          label: "事件类别",
          dic: "dic_sjlb",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "select",
          id: "responseLvCode",
          label: "响应级别",
          dic: "dic_sjjb",
          attrs: {
            value: "",
            // clearable: true,
            clearable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "input",
          id: "effectRange",
          label: "影响范围",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "input",
          id: "headquartersName",
          label: "应急指挥部",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "select",
          id: "headquartersLv",
          label: "指挥部级别",
          dic: "dic_zhbjb",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "dateTimePicker",
          id: "createTime",
          label: "成立时间",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true,
            type: "datetimerange",
            "start-placeholder": "开始日期",
            "end-placeholder": "结束日期",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        },
        {
          // elType: "input",
          elType: "select",
          id: "flowCode",
          label: "状态",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          },
          options: [
            {
              label: "编辑中",
              value: "1"
            },
            {
              label: "待审批",
              value: "2"
            },
            {
              label: "已发布",
              value: "3"
            },
            {
              label: "驳回",
              value: "4"
            }
          ]
        }
      ],
      visible: false,
      previewVisible: false,
      dialogVisible: false,
      multipleSelection: [],
      id: "",
      total: 10,
      pageSize: 10,
      pageNum: 1,
      formInline: {
        xymld: "",
        yjzhb: "",
        zhbjb: "",
        clsj: ""
      },
      from: {
        dic_xymld: [],
        dic_sjlb: [],
        dic_xyjb: [],
        dic_fbsj: []
      },
      type: {
        code: "add",
        name: "新增"
      }
    };
  },
  watch: {
    "$route.query.flowCode": {
      handler() {
        this.getList();
      },
      deep: true
    },
    "$route.query.id": {
      handler(val) {
        if (val) {
          this.type = {
            code: "add",
            name: "新增"
          };
          this.$nextTick(() => {
            this.$refs.emheadquartersadd.dialogConfig.isShow = true;
          });
        }
      },
      deep: true,
      immediate: true
    }
  },
  // mounted() {
  //   this.getList()
  // },
  created() {
    this.getList();
    this.getInputVal();
    // const role = JSON.parse(sessionStorage.getItem("role")).roleCode;
    // if (role === "hb_tbr") {
    //   this.table.actions = [
    //     {
    //       id: "ListAdd",
    //       text: "新增",
    //       type: "primary",
    //       btnAttr: { size: "small" }
    //     }
    //   ];
    // } else {
    //   this.table.actions = [];
    // }
    // && ["province_company_member"].includes(JSON.parse(sessionStorage.getItem("role")).roleCode)
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      // this.pageNum = val["current-page"];
      // this.pageSize = val["page-size"];
      const parmas = {
        pageNum: val["current-page"],
        pageSize: val["page-size"],
        responseName: this.formInline.responseName,
        eventCode: this.formInline.eventCode,
        responseLvCode: this.formInline.responseLvCode,
        effectRange: this.formInline.effectRange,
        headquartersName: this.formInline.headquartersName,
        headquartersLv: this.formInline.headquartersLv,
        publishTime: this.formInline.publishTime,
        flowCode: this.formInline.flowCode ? this.formInline.flowCode : this.$route.query.flowCode ? this.$route.query.flowCode : "",
        establishTimeStart: this.formInline.createTime ? this.formInline.createTime[0] : "",
        establishTimeEnd: this.formInline.createTime ? this.formInline.createTime[1] : ""
      };
      this.getList(parmas);
    },
    async deletelist(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deletelist({ id: row.id }).then((data) => {
            if (data) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    goEmheadquarterslist() {
      this.$router.push({
        path: "/Emheadquarterslist"
      });
    },
    // 跳转详情
    operinfo(row) {
      this.$router.push({
        path: "/headquarters",
        query: {
          id: row.id
        }
      });
    },
    // 抛出列表按钮
    onActionClick(item) {
      this[item.id](); // 调用按钮对应方法
    },
    // 获取下拉框数据
    getInputVal() {
      this.formData.forEach((item) => {
        if (item.dic) {
          getDictByGroupEmergency({ groupCode: item.dic }).then((res) => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.options = option;
          });
        }
        if (item.label === "响应命令单") {
          // 获取响应命令单下拉
          selectResponse().then((res) => {
            const option = res.map((i) => {
              return {
                label: i.responseName,
                value: i.id
              };
            });
            item.options = option;
          });
        }
      });
    },
    Reset() {
      this.formInline = this.$options.data().formInline;
      this.getList();
      // this.list()
    },
    query() {
      const parmas = {
        pageNum: this.paginationAtrrs["current-page"],
        pageSize: this.paginationAtrrs["page-size"],
        responseName: this.formInline.responseName,
        eventCode: this.formInline.eventCode,
        responseLvCode: this.formInline.responseLvCode,
        effectRange: this.formInline.effectRange,
        headquartersName: this.formInline.headquartersName,
        headquartersLv: this.formInline.headquartersLv,
        publishTime: this.formInline.publishTime,
        flowCode: this.formInline.flowCode ? this.formInline.flowCode : this.$route.query.flowCode ? this.$route.query.flowCode : "",
        establishTimeStart: this.formInline.createTime ? this.formInline.createTime[0] : "",
        establishTimeEnd: this.formInline.createTime ? this.formInline.createTime[1] : ""
      };
      this.getList(parmas);
      // this.list()
    },
    getList(val) {
      let parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        flowCode: this.$route.query.flowCode || ""
      };
      if (val) {
        parmas = val;
      }
      yjzhblistpage(parmas).then((res) => {
        this.table.tableData = res.data;
        this.paginationAtrrs.total = res.total;
      });
    },
    approvalhandleClose() {
      this.visible = false;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    operpreview() {
      this.visible = true;
    },
    ListAdd() {
      this.type = {
        code: "add",
        name: "新增"
      };
      this.id = "";
      this.$refs.emheadquartersadd.dialogConfig.isShow = true;
      // this.$refs.emheadquartersadd.$refs.formComponent.form.headquartersLv = 1
    },
    actionHandle(item, row) {
      this.id = row.id;
      if (item === "编辑") {
        this.type = {
          code: "edit",
          name: "编辑"
        };
        this.$refs.emheadquartersadd.dialogConfig.isShow = true;
        this.$refs.emheadquartersadd.getDetail(row.id);
      } else if (item === "审批") {
        this.type = {
          code: "approval",
          name: "审批"
        };
        this.$refs.emheadquartersadd.dialogConfig1.isShow = true;
        this.$refs.emheadquartersadd.getDetail(row.id);
      } else if (item === "查看") {
        this.operinfo(row);
      } else if (item === "删除") {
        this.deletelist(row);
      }
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNum = val;
    },
    // 多选单选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/common.less";
@import "../../../assets/style/pop-upNotification.less";
@import "../../../assets/style/ComponentStyle.less";

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
